<template>
  <div class="hom_container">
    <h1>Home</h1>
    <span class="span_set" ref="testspanm">dfjghdfgh</span>
    <div ref="divref">div</div>
    <el-button type="success" @click="gopath('/logon')">login</el-button>
    <el-switch
      v-model="switchFlag"
      active-icon="Moon"
      inactive-icon="Sunny"
      style="--el-switch-off-color: #b5aeae; --el-switch-on-color: #2c2c2c"
      :inline-prompt="true"
    ></el-switch>

    <router-link to="/scrollto" custom v-slot="{ route }">
      <span class="set_span_link" @click="gopath(route.fullPath)">scrollTop&图片懒加载&防抖</span></router-link
    >
    <hr />
    <br />
    <router-link to="/test" custom v-slot="{ route }"> <span class="set_span_link" @click="gopath(route.fullPath)">练习知识点页面</span></router-link>
    <br />
    <br />

    <router-link to="/page" custom v-slot="{ route }"> <span class="set_span_link" @click="gopath(route.fullPath)">网页学习</span></router-link>
    <router-link to="/suspense" custom v-slot="{ route }"> <span class="set_span_link" @click="gopath(route.fullPath)">异步组件</span></router-link>
    <router-link to="/Watfull" custom v-slot="{ route }"> <span class="set_span_link" @click="gopath(route.fullPath)">瀑布流测试</span></router-link>
    <router-link to="/sendflie" custom v-slot="{ route }"> <span class="set_span_link" @click="gopath(route.fullPath)">文件上传</span></router-link>
    <router-link to="/vmodel" custom v-slot="{ route }">
      <span class="set_span_link" @click="gopath(route.fullPath)">子组件 v-model、 数据绑定</span></router-link
    >
    <router-link to="/webworks" custom v-slot="{ route }"> <span class="set_span_link" @click="gopath(route.fullPath)">webworks</span></router-link>
    <br />
    <div style="padding: 4px"></div>
    <router-link to="/directive" custom v-slot="{ route }">
      <span class="set_span_link" @click="gopath(route.fullPath)">自定义指令 directive</span></router-link
    >
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { aesDecryptParams } from '@/utils/crypto.js';
import { useStore } from '@/store/user.js';
import { getCurrentInstance, onMounted, ref } from 'vue';

const refInstance = getCurrentInstance();
const testspanm = ref(null);
const switchFlag = ref(false);
onMounted(() => {
  console.log('----1', refInstance.refs.testspanm);
  console.log('----2', testspanm.value);
});
const userStoreRR = useStore();
// console.log(process.env);
//解密用户信息
let flag = Object.prototype.toString.call(userStoreRR.uS) === Object.prototype.toString.call({}) || false;
if (!flag) {
  console.log('000', aesDecryptParams(userStoreRR.uS));
}

var router = useRouter();
const gopath = (path) => {
  router.push({
    path: path
  });
};
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';

.hom_container {
  @include mainWidth;
  background: var(--el-bg-color-page);

  .set_span_link {
    background: var(--el-color-success-light-3);
    color: #fff;
    padding: 4px;
    border-radius: 4px;
    margin: 0 4px;
    cursor: pointer;
  }
}
</style>
